<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-15 14:28:37
-->
<template>
  <van-action-sheet v-model:show="show" title="礼物">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <van-grid :gutter="8" :column-num="4" :border="false">
          <van-grid-item
            v-for="item in git1"
            :key="item.giftId"
            @click="handleSendGift(item)"
          >
            <van-image :src="item.imgUrl" />
            <span style="color: #ffa500">{{ item.price }}金石</span>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item v-if="git2.length">
        <van-grid :gutter="8" :column-num="4" :border="false">
          <van-grid-item
            v-for="item in git2"
            :key="item.giftId"
            @click="handleSendGift(item)"
          >
            <van-image :src="item.imgUrl" />
            <span style="color: #ffa500">{{ item.price }}金石</span>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </van-action-sheet>
</template>



<script>
import { defineComponent, onMounted, ref, watch } from "vue";
import { getGiftList } from "@/api/live";
import { useStore } from "@/store";
export default defineComponent({
  setup(props, { emit }) {
    const show = ref(false);
    const store = useStore()
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        }
      }
    );
    const git1 = ref([]);
    const git2 = ref([]);
    const init = async () => {
      const res = await getGiftList({ state: 1, pageSize: 16 });
      if (res) {
        if (res.length > 8) {
          git1.value = res.slice(0, 8);
          git2.value = res.slice(8, 17);
        } else {
          git1.value = res;
          git2.value = [];
        }
      }
    };
    const handleSendGift = (item) => {
      emit("handleSendGift", item);
      show.value = false;
    };
    return {
      show,
      git1,
      git2,
      handleSendGift,
    };
  },
});
</script>



<style lang="scss" scoped>
.content {
  min-height: 200px;
}
</style>